<template>
	<view>
		<!-- 头部 -->
		<u-sticky>
			<view class="dingbu mainpadding2">
				<view class="" :style="{paddingTop:menutop+'rpx'}">
					<view class="flexbetween ssbox1" style="width: 480rpx;box-sizing: border-box;"  @click="tzsous">
						<view class="flexleft">
							<u-icon name="search" color="#999999" size="20"></u-icon>
							<input type="text" placeholder="请输入搜索内容" disabled="" class="hei_text main_size bold">
						</view>
						<view class="rightss">搜索</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<!-- 顶部分类 -->
		<view class="mainpadding">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view id="demo1" class="scroll-view-item_H uni-bg-red" v-for="item in menulist" :key="item.id" @click="selcettop(item)">
					<view class=" margin_right3">
						<view class="teshilt">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="ershiba margin_top1 xiaohong textcenter" :class="checktopid==item.id?'xiaohong':'xiaohei'">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 分类 -->
		<view class="flexleft">
			<!-- 左侧 -->
			<view class="left_box">
				<view class="" v-for="item in menuleftlist" :key="item.id" :class="item.id==checkleftid?'xuanzbox':'weixbox'" @click="leftclick(item)">{{item.name}}</view>
			</view>
			<!-- 右侧 -->
			<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltolower="onReachBottomt" @scroll="scroll"
					refresher-threshold="100" class="rightbox">
					<view class="flexcenter" v-if="!list.data.length">
						<view class="placeholderimage" style="margin-top: 200rpx;"></view>
					</view>
				<view class="margin_top" v-for="item in list.data" :key="item.Rec" @click="tzspxq(item.Rec)">
					<view class="flexbetween">
						<view class="shili">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="" style="width: 58%;">
							<view class="titletext fonweight yhxk">{{item.FullName}}</view>
							<view class="flexleft margin_top1">
								<view class="fenbox margin_right1">月销{{item.mouthsales}} </view>
								<view class="lanbox">库存 {{item.stock}}</view>
							</view>
							<view class="margin_top1 strongtext xiaohong">成本补贴价
								<text class="bigtext xiaohong fonweight">￥{{item.vipprice}}</text>
							</view>
							<view class="margin_top1 strongtext xiaohei">厂商指导价
								<text class="strongtext xiaohei fonweight">￥{{item.RetailStdPrice}}</text>
							</view>
						</view>
					</view>
					<view class="strongtext xiaohui margin_top1 yhxk" v-if="item.comment_des">最新评价：{{item.comment_des}}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				menutop: 0,
				menulist:[],
				checktopid:0,
				menuleftlist:[],
				checkleftid:0,
				page:1,
				pagedown:true,
				list:{
					data:[]
				},
				scrollTop:0,
				old:{
					scrollTop:0,
				}
			}
		},
		onShareAppMessage() {
			let _this = this
			return {
				title: "一点点大药房",
				path: "pages/index?code=" + uni.getStorageSync("yqm"),
			}
		},
		onShareTimeline: function() {
			return {
				title: "一点点大药房",
				path: "pages/index?code=" + uni.getStorageSync("yqm"),
			}
		},
		onLoad() {
			this.getmenu()
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
		},
		methods: {
			leftclick(item){
				if(this.checkleftid==item.id){
					return false
				}
				this.pagedown=true;
				this.page=1;
				this.checkleftid=item.id;
				this.init()
			},
			scroll(e){
				this.old.scrollTop = e.detail.scrollTop
			},
			selcettop(item){
				this.checktopid = item.id
				this.menuleftlist = item.childlist
				this.checkleftid = item.childlist[0].id
				this.init()
			},
			getmenu() {
				httpRequest.request('/api/goodscl/goodsCategory', 'GET', {
				}).then(res => {
					this.menulist = res.data
					this.checktopid = res.data[0].id
					this.menuleftlist = res.data[0].childlist
					this.checkleftid = res.data[0].childlist[0].id
					this.init()
				})
			},
			
			tzspxq(id) {
				uni.navigateTo({
					url: '/pages_index/shangpxq?id='+id
				})
			},
			init(isPage, page) {
				let _this = this;
				let url = '/api/goodscl/goodsindex'
				let data = {
					page: page || 1,
					limit:12,
					category_id:this.checkleftid
				}
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request(url, 'GET',data, false, false, true).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						if(res.data.length==0){
							this.pagedown = false
						}
						if (isPage == true) {
							_this.list.data = _this.list.data.concat(res.data);
						} else {
							this.list.data = []
							this.goTop()
							_this.list.data = res.data;
							this.pagedown = true
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			onReachBottomt() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (!this.pagedown) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			tzsous() {
				uni.navigateTo({
					url: '/pages_index/sousuo'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.lanbox {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		color: #4B88B4;
		width: 115rpx;
		height: 41rpx;
		background: #E1F3FF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #7FBDE3;
	}

	.fenbox {
		width: 153rpx;
		height: 41rpx;
		background: #FFEFF2;
		font-size: 24rpx;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #C01933;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid rgba(192, 25, 51, 1);
	}

	.shili {
		width: 189rpx;
		height: 199rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}

	.weixbox {
		padding: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #666666;
	}

	.xuanzbox {
		padding: 30rpx;
		border-left: 2rpx solid #C01933;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #C01933;
		background-color: #FFFFFF;
	}

	.rightbox {
		position: fixed;
		left: 236rpx;
		top: 390rpx;
		box-sizing: border-box;
		width: 66%;
		height: calc(100vh - 10vh);
		// overflow-y: auto;
		padding-bottom: 17vh;
	}

	.left_box {
		padding-bottom: 300rpx;
		position: fixed;
		left: 0;
		top: 390rpx;
		width: 28%;
		height: calc(100vh - 160rpx);
		overflow-y: auto;
		background: #F2F2F2;
		box-sizing: border-box;
	}

	.teshilt {
		margin: auto;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx 50rpx 50rpx 50rpx;

		image {
			margin: auto;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			width: 100%;
			height: 100%;
		}
	}

	.dingbu {
		background-color: #fed8d3;
	}

	.ssbox1 {
		position: relative;
		padding: 5rpx 5rpx 5rpx 10rpx;
		border-radius: 50rpx;
		background-color: #F2F2F2;

		.rightss {
			width: 130rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #C01933;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>